﻿@{
    ViewBag.Title = "列表";
    var F = Html.F();
}

@section head {

}

@section body {
    @(F.Panel().ID("Panel1").BodyPadding(3).ShowBorder(false).ShowHeader(false).Layout(LayoutType.Fit).AutoScroll(true).IsViewPort(true)
        .Toolbars(F.Toolbar().Position(ToolbarPosition.Top).Items(
            F.Button().ID("Button_add").Icon(Icon.Add).Text("新增").OnClientClick("openWindow()"),
            F.ToolbarSeparator(),
            F.Button().ID("Button_delete").Icon(Icon.Delete).Text("批量删除").OnClientClick("getGridSelectedRows()"))
        )
        .Items(
            F.Grid().Layout(LayoutType.Fit).AllowPaging(true).IsDatabasePaging(true).EnableCheckBoxSelect(true).CheckBoxSelectOnly(true).ShowHeader(false).ShowBorder(true)
                .ID("Grid1").OnPageIndexChanged(Url.Action("ShowGrid"),"Panel1").DataIDField("GridID").EnableTextSelection(true).EnableHeaderMenu(false)
                .Toolbars(F.Toolbar().Position(ToolbarPosition.Top)
                    .Items(
                        F.DropDownList().ID("f_RoleID").DataTextField("RoleName").DataValueField("GridID").Label("权限角色").DataSource(ViewBag.role),
                        F.TextBox().ID("txb_keyword").EmptyText("登录名称或真实姓名查询"),
                        F.Button().ID("btnSearch").Text("查询").Icon(Icon.SystemSearch).OnClientClick("onGridBind()")
                    )
                )
                .PageItems(
                    F.ToolbarSeparator(),
                    F.DropDownList().ID("ddlPageSize").Width(160).Label("每页记录数")
                        .Items(
                            F.ListItem().Text("10").Value("10"),
                            F.ListItem().Text("20").Value("20").Selected(true),
                            F.ListItem().Text("50").Value("50"),
                            F.ListItem().Text("100").Value("100")
                        ),
                    F.ToolbarSeparator()
                )
                .Columns(
                    //F.RowNumberField(),
                    F.RenderField().HeaderText("编辑").ColumnID("Actions").Width(50).RendererFunction("renderActions")
                    ,F.RenderField().HeaderText("登录名称").DataField("LoginName").Width(100)
                    ,F.RenderField().HeaderText("真实姓名").DataField("RealName").Width(100)
                    ,F.RenderField().HeaderText("权限角色").DataField("RoleName").Width(150)
                    ,F.RenderField().HeaderText("照片").DataField("Photo").Width(100).RendererFunction("renderPhoto").HeaderTextAlign(TextAlign.Center)
                    , F.RenderField().HeaderText("排序").DataField("Sort").FieldType(FieldType.Int).TextAlign(TextAlign.Right).Width(70)
                    ,F.RenderField().HeaderText("备注").DataField("Remark").Width(100).ExpandUnusedSpace(true)
                    ,F.RenderCheckField().HeaderText("显示").DataField("State").RenderAsStaticField(true).Width(50)

                )
        ))
    @(F.Window().ID("Window1").Height(450).Width(650).IsModal(true).EnableMaximize(true).EnableIFrame(true).Hidden(true).Icon(Icon.ApplicationFormEdit).Target(Target.Top).EnableResize(true)
        .CloseAction(CloseAction.HidePostBack).OnClose(Url.Action("ShowGrid"),"Panel1"))
}

@section script {
    <script>
        function onGridBind() {
            var grid1 = F.ui.Grid1;
            grid1.setPageIndex(0);
            // 触发后台事件
            F.doPostBack('@Url.Action("ShowGrid")', "Panel1");
        }

        F.ready(function() {
            onGridBind();
            F.ui.ddlPageSize.on('change', function () { onGridBind() });

            var grid = F.ui.Grid1;
            grid.el.on('click', '.f-grid-cell-Actions .action.editit', function (event) {
                var targetEl = $(this);
                var rowEl = targetEl.closest('.f-grid-row');
                var rowData = grid.getRowData(rowEl);
                var rowId = rowData.id;
                openWindow(rowId); // 显示窗体
            });
        })

        function getGridSelectedRows() {
            F.confirm({
                message: "确定要执行选中行删除操作吗？",
                ok: function() {
                    var result = '', grid = F.ui.Grid1;                  
                    var selectRows = grid.getSelectedRows(true);
                    if (selectRows.length == 0) {
                        NotifyQuestion("请选择要删除的选中行");
                    }
                    else {
                        $.each(selectRows,
                            function (index, item) {
                                result += ',' + item.id;// item.id对应绑定的.DataIDField("GridID")的值;item.values.字段1 对应列DataField("字段1")
                            });
                        F.doPostBack('@Url.Action("Button_delete_Click")', { ids: result });
                    }
                }
            })
        }

        function openWindow(id) {
            if (id) {
                F.ui.Window1.show('@Url.Action("Add", "SysAdmin")'+"?id="+id, '编辑');
            } else {
                F.ui.Window1.show('@Url.Action("Add")', '新增');
            }
        }

        function renderPhoto(value, params) {
            return GetHtmlImg(value,"","","width='80'");
        }
    </script>
}
